<template>
  <div class="managementSetting">
    <div class="headnavigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>查勤监督</el-breadcrumb-item>
        <el-breadcrumb-item class="currentPage">考勤管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main class="content">
      <div class="TAB">
        <div>
          <section class="selectBox">
            <span>姓名</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入姓名关键词"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>联系方式</span>
            <el-select
              v-model="obj_searchData.s_card"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入联系方式关键词"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item in obj_returnRemoteData.arr_card"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="selectBox">
            <span>所属部门</span>
            <el-select v-model="obj_searchData.s_deparment">
              <el-option
                v-for="item in obj_returnRemoteData.arr_deparment"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </section>
          <section class="left_button">
            <button>搜索</button>
            <button>重置</button>
          </section>
        </div>
      </div>
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="arr_tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="10%"></el-table-column>
          <el-table-column label="编号" width="60%" type="index"></el-table-column>
          <el-table-column prop="s_name" label="姓名">
          </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="scope">
              <img src="../../assets/policewoman.jpg" />
            </template>
          </el-table-column>
          <el-table-column prop="s_phone" label="联系方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_deparment" label="所属部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="s_state" label="排值班情况" show-overflow-tooltip></el-table-column>
          <el-table-column label="考勤情况">
            <template slot-scope="scope">
              <button
                class="editButton"
                @click="handleEdit(scope.$index, scope.row)"
              >查看详情</button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="s_currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="60"
        ></el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s_currentPage: "",
      arr_tableData: [
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "休假",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "值班",
        },
        {
          s_name: "白小白",
          s_phone: "15615151848",
          s_deparment: "鸳鸯派出所",
          s_state: "休假",
        },
      ],
      obj_searchData: {
        s_card: "",
        s_name: "",
        s_deparment: "",
        s_userPosition: ""
      },
      // 模糊查询，远程搜索返回结果
      obj_returnRemoteData: {
        arr_card: [],
        arr_name: [],
        arr_deparment: ["两江分局", "鸳鸯派出所"],
        arr_userPosition: ["超级管理员", "管理员", "民警", "辅警"]
      },
    };
  },
  methods: {
    remoteMethod(value) {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //查看
    handleEdit(index, row) {
      this.$router.replace('跳转页面');
      console.log(index, row);
    },
    //全选删除
    deleteEvent() {
      this.$confirm("是否确定删除“白小白”两个账户?", "批量删除", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/sass/checkingSupervision/checking.scss";
</style>